*{
    margin: 0;
    padding: 0;
    list-style: none;
}

body{
    background:#368 url(../images/bg.jpg) ;
}

#content{
    width: 1280px;
    height: 481px;
    margin: 100px auto;
}

#content ul{
    /*弹性盒模型 横竖均分*/
    display: flex;
    flex-wrap: wrap;   /*强制换行*/
    /*主轴（横向）方向元素排列：环绕*/
    justify-content: space-around;
    /*辅轴（纵向）方向元素排列：居中*/
    align-items: center;

    width:100%;
    height: 100%;
}

#content ul li{
    width: 418px;
    height: 213px;
    background: url(../images/p1.png) no-repeat 0 17px;
    transition: 0.5s;
    /*cursor: pointer;*/
}

#content ul li:hover{
    background-position-y: 0px;
}

polyline{
    fill: none;  /*不填充*/
    stroke: #a57c47;
    stroke-width: 2; /*半径*/
    stroke-dasharray:1160;  /*线总长*/
    stroke-dashoffset: 1160;/*绘制的距离  反向的  （目前不可见距离）*/
}

/*绘制动画序列*/
@keyframes dash{
    to{stroke-dashoffset: 0;}
}

#content ul li:hover polyline{
    animation: dash 1s linear forwards;  /*执行动画名为dash的动画: 名称 时间 匀速 保持*/
}

#content ul li:nth-child(2){
  background-image: url(../images/p2.png);
}
#content ul li:nth-child(3){
  background-image: url(../images/p3.png);
}
#content ul li:nth-child(4){
  background-image: url(../images/p4.png);
}
#content ul li:nth-child(5){
  background-image: url(../images/p5.png);
}
#content ul li:nth-child(6){
  background-image: url(../images/p6.png);
}

